import React, { useState } from 'react';
import { Input, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

import styles from './index.module.css';

const { TextArea } = Input;

const AddItem = ({ state, setStateHandle }) => {
  let taskName = '';

  const changeIsAddHandle = (value) => {
    setStateHandle({ isAdd: value });
  }

  const taskValueChange = (value) => {
    taskName = value;
  }

  const addItemHandle = () => {
    console.log('taskName :>> ', taskName);
  }


  if (!state.isAdd) {
    return (
      <div className={styles.addTask} onClick={changeIsAddHandle.bind(this, true)}>
        <PlusOutlined /> 添加新任务
      </div>
    );
  }
  return (
    <div>
      <TextArea rows={2} value={taskName} onChange={taskValueChange} />
      <div style={{marginTop: 16}}>
        <Button type="primary" style={{marginRight: 16}} onClick={addItemHandle}>确定</Button>
        <Button type="link" onClick={changeIsAddHandle.bind(this, false)}>取消</Button>
      </div>
    </div>
  );
};

export default AddItem;
